<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="qc:admins" content="07216227476305205456375" />

<title>用户注册</title>
<link href="css/shoppingCarAndMyCustom.css" type="text/css"
	rel="stylesheet" />
<link href="css/login.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/login.js"></script>

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript"
	src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
	data-appid="100348720" charset="utf-8">
	
</script>
<script
	src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=4095648622"
	type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
	$(document).ready(function() {

		WB2.anyWhere(function(W) {
			W.widget.connectButton({
				id : "wb_connect_btn",
				type : '1,2',
				callback : {
					login : function(o) { //登录后的回调函数 
						$("#nickname").val(o.screen_name);
					},
					logout : function() { //退出后的回调函数 
						$("#nickname").val("");
					}
				}
			});
		});

	});
	var bopenid;
	function yanopenid() {

		var oid = $("#hiddenthirdpartyid").val();

		$.post("checkOpenId.action", {
			openid : oid
		}, function(data) {

			var username = data.username;
			if (data.username != null) {
				bopenid = 1;
				alert("账号已被" + data.username + "”绑定..");

			} else {

				bopenid = 2;

			}
		});
		setTimeout(function() {
			alert(bopenid + "-----------");
		}, 500);
		return bopenid;
	}

	function register() {

		yanname();
		email();
		yancon();
		yanpass();
		var nickname = $("#nickname").val();
		$.ajax({
			type : 'post',
			url : 'getSession.action',
			data : {
				sessionid : "rand"
			},
			success : function(data) {

				if ($("#validataimg").val() != data.value) {
					alert("验证码错误，请重新输入");
					$("#validataimg").val("");
					chageValidateCode();
				} else {

					var oid = $("#hiddenthirdpartyid").val();

					$.post("checkOpenId.action", {
						openid : oid
					}, function(data) {

						var username = data.username;
						if (data.username != null) {
							bopenid = 1;
							alert("账号已被" + data.username + "”绑定..");

						} else {


						if (ypass && ycon && ymail && yname1) {

							window.location.href = "register.action?email="
									+ $("#mail").val() + "&&password="
									+ $("#password").val() + "&&username="
									+ $("#username").val() + "&&thirdPartyId="
									+ $("#hiddenthirdpartyid").val()
									+ "&&nickname=" + $('#nickname').val();
						}
					}
					
				})
				}
			},
			datatype : 'json'
		});
	}

	function chageValidateCode() {
		var timenow = new Date().getTime();
		$("img.validate").attr("src", "showCheckCode.action?d=" + timenow);
	}

	var reg = /^(\w){2,15}$/;
	var youxiang = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
	var ypass = false;
	var ycon = false;
	var ymail = false;
	var yname1 = false;

	function yanname() {

		var name = $('#username').val();

		if (name == "") {
			yname1 = false;
			$('#usernamefont').css("color", "red");
			$('#usernamefont').html("用户名不能为空！");
		} else {
			$.post("yanuser.action", {
				"username" : name
			}, function(data) {

				if (data == "false") {
					yname1 = false;
					$('#usernamefont').css("color", "red");
					$('#usernamefont').html("用户名已存在");
				} else {
					$('#usernamefont').css("color", "green");
					$('#usernamefont').html("√");
					yname1 = true;

				}
			});

		}
	}

	function yanpass() {

		var pass = $('#password').val();
		var passfont = $('#passfont');

		if (pass != "" && pass != null) {
			if (reg.test(pass)) {

				ypass = true;
				passfont.css("color", "green");
				passfont.html("√");
			} else {
				passfont.css("color", "red");
				passfont.html("长度要在2-15位之间");
			}
		} else {
			passfont.css("color", "red");
			passfont.html("密码不能为空");
		}

	}

	function yancon() {

		var pass = $('#password').val();
		var con = $('#confirm').val();
		var confont = document.getElementById("confont");

		if (con != "" && con != null) {
			if (con == pass) {
				ycon = true;
				confont.style.color = "green";
				confont.innerHTML = "√";
			} else {
				confont.style.color = "red";
				confont.innerHTML = "确认密码跟原密码不同！";
			}
		} else {
			confont.style.color = "red";
			confont.innerHTML = "确认密码不能为空";
		}
	}

	function email() {

		var kkmail = $('#mail').val();
		var mailfont = $('#mailfont');

		$.post("yanemail.action", {
			email : kkmail
		}, function user(data) {
			if (kkmail != "" && kkmail != null) {
				if (data.str == "false") {
					mailfont.css("color", "red");
					mailfont.html("此邮箱已被注册");
				} else {
					if (youxiang.test(kkmail)) {
						ymail = true;
						mailfont.css("color", "green");
						mailfont.html("√");
					} else {

						mailfont.css("color", "red");
						mailfont.html("邮箱不符合格式");
					}
				}
			} else {
				mailfont.css("color", "red");
				mailfont.html("邮箱不能为空");
			}
		}, "json");
	}
	var yCode = false;
	function yanCode() {
		var code = $('#validataimg').val();
		$.ajax({
			type : 'post',
			url : 'getSession.action',
			data : {
				sessionid : "rand"
			},
			success : function(data) {

				if ($("#validataimg").val() != data.value) {
					alert("验证码错误，请重新输入");
					chageValidateCode();
					$("#codefont").html("&nbsp;&nbsp;");
				} else {
					yCode = true;
					$("#codefont").html("√");
				}
			},
			datatype : 'json'
		});
	}
</script>


<body>

	<input type="hidden" value="0" id="hiddenthirdpartyid" />

	<script type="text/javascript">
		//调用QC.Login方法，指定btnId参数将按钮绑定在容器节点中
		QC
				.Login(
						{
							//btnId：插入按钮的节点id，必选
							btnId : "qq_login_btn",
							//用户需要确认的scope授权项，可选，默认all
							scope : "all",
							//按钮尺寸，可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S]，可选，默认B_S
							size : "C_S"
						},
						function(reqData, opts) {//登录成功
							//根据返回数据，更换按钮显示状态方法

							QC.api("get_user_info").success(function(s) {//成功回调
								$("#nickname").val(s.data.nickname);
							}).error(function(f) {//失败回调
								alert("获取用户信息失败！");
							}).complete(function(c) {//完成请求回调
							});
							QC.Login.getMe(function(openId, accessToken) {
								$("#hiddenthirdpartyid").val(openId);
								$.post("checkOpenId.action", {
									openid : openId
								}, function(data) {

									var username = data.username;
									if (data.username != null) {
										alert("账号已被“" + data.username + "”绑定");
									}
								});
							});

							var dom = document.getElementById(opts['btnId']), _logoutTemplate = [
									//头像
									'<span><img src="{figureurl}" class="{size_key}"/></span>',
									//昵称
									'<span>{nickname}</span>',
									//退出
									'<span><a href="javascript:QC.Login.signOut();">退出</a></span>' ]
									.join("");
							dom
									&& (dom.innerHTML = QC.String
											.format(
													_logoutTemplate,
													{
														nickname : QC.String
																.escHTML(reqData.nickname),
														figureurl : reqData.figureurl
													}));
						}, function(opts) {//注销成功
							$("#nickname").val("");

						});
	</script>
	<jsp:include page="top.jsp"></jsp:include>
	<br />
	<table>
		<tr>
			<td><br /> <br /></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td align="center" valign="top">
				<table style="margin-left: 150px; width: 80%;">
					<tr>
						<td><font class="ziti1">使用其他账户直接登录：</font> <span
							id="qq_login_btn"></span> <span id="wb_connect_btn"></span></td>
					</tr>
					<tr>
						<td><br /></td>
					</tr>
					<tr>
						<td>
							<div style="width: 130%">
								<font class="ziti1">选择注册新账号登录：</font>
							</div></td>
					</tr>
					<tr>
						<td>
							<div style="width: 130%">
								&nbsp;&nbsp;&nbsp;<font class="ziti2">用户名：</font> <input
									type="text" name="username" id="username" onblur="yanname()"
									style="width:220px;" /> <font id="usernamefont" size="2"
									color="red"></font>
							</div></td>
					</tr>
					<tr>
						<td>
							<div style="width: 130%">
								&nbsp;&nbsp;&nbsp;<font class="ziti2">昵&nbsp;&nbsp;称：</font> <input
									type="text" name="nickname" id="nickname"
									onblur="yannickname()" style="width:220px;" /> <font
									id="nicknamefont" size="2" color="red"></font>
							</div></td>
					</tr>
					<!-- <tr>
							<td>&nbsp;&nbsp;&nbsp;<font class="ziti2">用户名：</font> <input
								type="text" name="mail" id="mail" onblur="email()"
								style="width:220px;" /> <font id="mailfont" color="blue"></font>
							</td>
						</tr> -->
					<tr>
						<td>
							<div style="width: 130%">
								&nbsp;&nbsp;&nbsp;<font class="ziti2">Email地址：</font> <input
									type="text" name="mail" id="mail" onblur="email()"
									style="width:220px;" /> <font id="mailfont" size="2"
									color="red"></font>
							</div></td>
					</tr>
					<tr>
						<td>
							<div style="width: 130%">
								&nbsp;&nbsp;&nbsp;<font class="ziti2">设置登陆密码：</font> <input
									type="password" name="password" id="password"
									onblur="yanpass()" style="width:195px;" /> <font id="passfont"
									color="red" size="2"></font>
							</div></td>
					</tr>
					<tr>
						<td>
							<div style="width: 130%">
								&nbsp;&nbsp;&nbsp;<font class="ziti2">确认登录密码：</font> <input
									type="password" name="confirm" id="confirm" onblur="yancon()"
									style="width:195px;" /> <font id="confont" color="red"
									size="2"></font>
							</div></td>
					</tr>
					<tr>
						<td>&nbsp;&nbsp;&nbsp;<font class="ziti2">验证码：</font><input
							type="text" style="width:80px;" id="validataimg"
							onblur="yanCode()" /><font color="green" id="codefont">&nbsp;&nbsp;</font>
							<img class="validate" src="showCheckCode.action"
							style="width:65px;height:25px" /> <font class="ziti3">看不清？</font>
							<a href="javascript:void()" onclick="chageValidateCode()">换一张</a>
						</td>
					</tr>
					<tr>
						<td><font class="ziti4">请阅读《webbei网贝服务条款》</font></td>
					</tr>
					<tr>
						<td><br /></td>
					</tr>
					<tr>
						<td><input type="button" value="同意以上条款并注册" id="sub"
							class="login_Button" onclick="register()" /></td>
					</tr>
				</table></td>
		</tr>
	</table>
	<jsp:include page="bottom.jsp"></jsp:include>
</body>
</html>
